<template>
  <span class="pipe-date-time">
    <el-icon style="margin-right: 8px" v-if="showIcon"><Clock /></el-icon>
    <span>{{ datetimeText }}</span>
  </span>
</template>

<script setup lang="ts">
import { computed } from 'vue-demi';
import { formatDate } from '@/utils/util';
import { Clock } from '@element-plus/icons-vue';

const props = defineProps({
  value: {
    type: [Number, String],
    default: ''
  },

  showIcon: {
    type: Boolean,
    default: true
  }
});

const datetimeText = computed(() => {
  if (!Number(props.value)) return '--';
  return props.value ? formatDate(props.value) : props.value;
});
</script>

<style lang="scss" scoped>
.pipe-date-time {
  // display: inline-flex;
  // justify-content: center;
  // align-items: center;
  // line-height: 1;
}
</style>
